<!--
 * @Author: your name
 * @Date: 2022-04-27 09:37:46
 * @LastEditTime: 2023-05-19 08:56:39
 * @LastEditors: wangwang 2723008256@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jzjy\src\views\ResourceCenter\index.vue
-->

<template>
  <!-- 资源中心页 -->
  <div id="container">
    <div class="bigTap">
      <div class="banben">
        <h4>当前教学版本</h4>
        <p>{{ kejianversions_title }} <span @click="gokemu">切换</span></p>
      </div>
      <div
        class="tabs"
        v-for="item in menus"
        :key="item.id"
        @click="changeTap(item.id)"
        :class="{ chosebigTap: bigtapvalue == item.id }"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="content">
      <div class="resFl">
        <h2>资源目录</h2>
        <div class="chosedTap" v-if="bigtapvalue == 1 && chosedbook != ''">
          <span>已选择：</span>
          <div class="chosedtabsLists">
            <div class="chosedtab" v-show="chosedbook != ''">
              <p>{{ chosedbook }}</p>
              <i class="el-icon-close" @click="delechosedbook"></i>
            </div>
            <div class="chosedtab" v-show="chosedmulu1 != ''">
              <p>{{ chosedmulu1 }}</p>
              <i class="el-icon-close" @click="delechosedmulu1"></i>
            </div>
            <div class="chosedtab" v-show="chosedmulu2 != ''">
              <p>{{ chosedmulu2 }}</p>
              <i class="el-icon-close" @click="delechosedmulu2"></i>
            </div>
            <div class="chosedtab" v-show="chosedmulu3 != ''">
              <p>{{ chosedmulu3 }}</p>
              <i class="el-icon-close" @click="delechosedmulu3"></i>
            </div>
          </div>
        </div>
        <div class="box">
          <el-collapse v-model="bigTap" accordion @change="changeTap">
            <el-collapse-item name="1">
              <template slot="title">
                <div class="title" :class="{ chose: bigtapvalue == 1 }">
                  <h3>同步资源</h3>
                  <i class="el-icon-arrow-down" v-show="bigtapvalue != 1"></i>
                  <i class="el-icon-arrow-up" v-show="bigtapvalue == 1"></i>
                </div>
              </template>
              <div class="tongbu">
                <el-collapse
                  v-model="kejianbooks_id"
                  accordion
                  @change="handleBook"
                >
                  <el-collapse-item
                    :name="item.id"
                    v-for="(item, index) in booksList"
                    :key="item.id"
                  >
                    <template slot="title">
                      <div
                        class="title"
                        @click="choseBook(item.nianji_id, item.title, index)"
                        :class="{ chosetoubuTitle: kejianbooks_id == item.id }"
                      >
                        <h3>{{ item.title }}</h3>
                        <i
                          class="el-icon-arrow-down"
                          v-show="kejianbooks_id != item.id"
                        ></i>
                        <i
                          class="el-icon-arrow-up"
                          v-show="kejianbooks_id == item.id"
                        ></i>
                      </div>
                    </template>
                    <el-tree
                      :data="mululist"
                      :props="defaultProps"
                      :highlight-current="true"
                      :accordion="true"
                      icon-class="el-icon-arrow-down"
                      @node-click="handleNodeClick"
                      node-key="id"
                      :default-expanded-keys="[kejianchapters_id]"
                      empty-text="暂无数据"
                      :expand-on-click-node="true"
                      :auto-expand-parent="true"
                      :default-expand-all="isExpandAll"
                      ref="tree"
                    ></el-tree>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <template slot="title">
                <div class="title" :class="{ chose: bigtapvalue == 2 }">
                  <h3>试卷</h3>
                  <i class="el-icon-arrow-down" v-show="bigtapvalue != 2"></i>
                  <i class="el-icon-arrow-up" v-show="bigtapvalue == 2"></i>
                </div>
              </template>
              <div class="sjflLists">
                <div
                  class="shijuanfl"
                  v-for="item in sjflList"
                  :key="item.id"
                  @click="chosedsjfl(item.id)"
                  :class="{ chosesjfl: kejiantag_id == item.id }"
                >
                  <h3>{{ item.title }}</h3>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="3">
              <template slot="title">
                <div class="title" :class="{ chose: bigtapvalue == 3 }">
                  <h3>素材库</h3>
                  <i class="el-icon-arrow-down" v-show="bigtapvalue != 3"></i>
                  <i class="el-icon-arrow-up" v-show="bigtapvalue == 3"></i>
                </div>
              </template>
              <div class="scflLists">
                <div
                  class="sucaifl"
                  v-for="item in scflList"
                  :key="item.id"
                  @click="chosedscfl(item.id)"
                  :class="{ chosescfl: kejiantag_id == item.id }"
                >
                  <h3>{{ item.title }}</h3>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="4">
              <template slot="title">
                <div class="title" :class="{ chose: bigtapvalue == 4 }">
                  <h3>教学课</h3>
                  <i class="el-icon-arrow-down" v-show="bigtapvalue != 4"></i>
                  <i class="el-icon-arrow-up" v-show="bigtapvalue == 4"></i>
                </div>
              </template>
            </el-collapse-item>
            <el-collapse-item name="5" v-if="dingzhiNj_id != 11">
              <template slot="title">
                <div class="title" :class="{ chose: bigtapvalue == 5 }">
                  <h3>资源包</h3>
                  <i class="el-icon-arrow-down" v-show="bigtapvalue != 5"></i>
                  <i class="el-icon-arrow-up" v-show="bigtapvalue == 5"></i>
                </div>
              </template>
              <div class="ziyuanbaoflLists">
                <div
                  class="ziyuanbaofl"
                  v-for="item in ziyuanbaochaptersLists"
                  :key="item.dy_id"
                  @click="chosedzybfl(item.dy_id)"
                  :class="{ chosescfl: ziyuanbaochapters_id == item.dy_id }"
                >
                  <h3>{{ item.kejianbooks_title }} · {{ item.dy_title }}</h3>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="right">
        <!-- 课件顶部资源包 -->
        <div class="topziyuanbao" v-show="bigtapvalue == 1">
          <div
            class="topzybLists"
            v-for="item in tbzyb"
            :key="item.id"
            @click="goresDetails(item.id, item.lx, item.suffix)"
          >
            <div class="pic">
              <img src="../../assets/img/ziyuanbaonew.png" alt="" />
            </div>
            <div class="msg">
              <div class="title">
                {{ item.title }}
              </div>
              <div class="bottom">
                <span class="upTime"
                  >更新于
                  {{ timeStamp2String(item.update_time * 1000, 2) }}</span
                >
                <span class="zynum"
                  >内含<a>{{ item.kejian_nums }}</a
                  >份资源</span
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 课件分类，右侧横向tap -->
        <div
          class="kejianTaps"
          v-show="bigtapvalue == 1 && kejianflList.length != 0"
        >
          <div class="flname">
            <span style="marginleft: 20px">分类：</span>
            <span
              :class="{ fenlei_color: kejianfl_id == item.id }"
              v-for="item in kejianflList"
              :key="item.id"
              @click="choseKejianfl(item.id, item.systypes_id, item.title)"
              >{{ item.title }}</span
            >
          </div>
        </div>
        <!-- 试卷顶部分类 -->
        <div class="topshijuanfl" v-show="bigtapvalue == 2">
          <div class="topfl">
            <div class="fltitle">类型：</div>
            <div class="fllists">
              <span
                class="flall"
                :class="{ chosedsjfl: kejiantag_id == '' }"
                @click="choseall('fl')"
                >全部</span
              >
              <span
                v-for="item in sjflList"
                :key="item.id"
                @click="chosedsjfl(item.id)"
                :class="{ chosedsjfl: kejiantag_id == item.id }"
                >{{ item.title }}</span
              >
            </div>
          </div>
          <div class="topfl">
            <div class="fltitle">年级：</div>
            <div class="fllists">
              <span
                class="flall"
                :class="{ chosedsjfl: nianji_id == '' }"
                @click="choseall('nianji')"
                >全部</span
              >
              <span
                v-for="item in nianjilists"
                :key="item.id"
                @click="chosedsjnj(item.id)"
                :class="{ chosedsjfl: nianji_id == item.id }"
                >{{ item.title }}</span
              >
            </div>
          </div>
          <div class="topfl">
            <div class="fltitle">地区：</div>
            <div class="fllists">
              <!-- <span
                class="flall"
                :class="{ chosedsjfl: dq_ids == '' }"
                @click="choseall('diqu')"
                >全部</span
              > -->
              <span
                v-for="item in diquLists.slice(0, sjdqNum)"
                :key="item.id"
                @click="chosedsjdq(item.id)"
                :class="{ chosedsjfl: dq_ids == item.id }"
                >{{ item.title }}</span
              >
              <span @click="getalldq" v-show="getalldqshow">展开更多></span>
              <span @click="getsomedq" v-show="!getalldqshow">收起></span>
            </div>
          </div>
          <div class="topfl">
            <div class="fltitle">年份：</div>
            <div class="fllists">
              <span
                class="flall"
                :class="{ chosedsjfl: nian_ids == '' }"
                @click="choseall('nianfen')"
                >全部</span
              >
              <span
                v-for="item in nianfenLists.slice(0, sjnfNum)"
                :key="item.id"
                @click="chosedsjnf(item.id)"
                :class="{ chosedsjfl: nian_ids == item.id }"
                >{{ item.title }}</span
              >
              <span @click="getallnf" v-show="getallnfshow">展开更多></span>
              <span @click="getsomenf" v-show="!getallnfshow">收起></span>
            </div>
          </div>
        </div>
        <!-- 素材库的分类 -->
        <div class="sucaiTaps" v-if="bigtapvalue == 3">
          <div class="topfl">
            <div class="fltitle">分类：</div>
            <div class="fllists">
              <span
                :class="{
                  chosedfl: kejiantag_id == 0,
                }"
                @click="chosedscfl(0)"
                >全部</span
              >
              <span
                :class="{
                  chosedfl: kejiantag_id == item.id,
                }"
                @click="chosedscfl(item.id)"
                v-for="item in scflList"
                :key="item.id"
                >{{ item.title }}</span
              >
            </div>
          </div>
          <div class="topfl">
            <div class="fltitle">时间：</div>
            <div class="fllists">
              <span
                :class="{
                  chosedfl: days == item.id,
                }"
                @click="chosesucaiTagfl(item.id)"
                v-for="item in scTagList"
                :key="item.id"
                >{{ item.title }}</span
              >
            </div>
          </div>
        </div>
        <!-- 教研课和教学课的标签 -->
        <div class="jiaoxueclass" v-if="bigtapvalue == 4">
          <div class="taps">
            <span style="marginleft: 20px">分类：</span>
            <span
              :class="{
                chosedfl: classof == item.id,
              }"
              @click="chosejyjxTagfl(item.id)"
              v-for="item in jyjxTagList"
              :key="item.id"
              >{{ item.title }}</span
            >
          </div>
        </div>
        <!-- 资源包的分类 -->
        <div
          class="sucaiTaps"
          v-if="bigtapvalue == 5 && ziyuanbaochaptersLists.length != 0"
        >
          <div class="topfl">
            <div class="fltitle">分类：</div>
            <div class="fllists">
              <span
                :class="{
                  chosedfl: ziyuanbaochapters_id == item.dy_id,
                }"
                @click="chosedzybfl(item.dy_id)"
                v-for="item in ziyuanbaochaptersLists"
                :key="item.dy_id"
                >{{ item.kejianbooks_title }} · {{ item.dy_title }}</span
              >
            </div>
          </div>
        </div>
        <!-- 课件列表  正常课件模块-->
        <div class="kejianlist" v-if="bigtapvalue != 4 && bigtapvalue != 5">
          <div
            class="kejianBox"
            v-for="item in kejianLists"
            :key="item.id"
            v-show="kejianLists != [] && kejianfl_id < 10000"
            @click="goresDetails(item.id, item.lx, item.suffix)"
          >
            <div class="kejianfile">
              <img
                src="../../assets/img/ziyuan.png"
                v-if="item.lx == 2"
                style="height: 74px"
              />
              <img
                src="../../assets/img/resFile (1).png"
                alt="file_url"
                v-if="
                  item.suffix == 'ppt' ||
                  item.suffix == 'pptx' ||
                  item.suffix == 'ppsx' ||
                  item.suffix == 'pps'
                "
              />
              <img
                src="../../assets/img/resFile (2).png"
                alt="file_url"
                v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
              />
              <img
                src="../../assets/img/resFile (3).png"
                alt="file_url"
                v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
              />
              <img
                src="../../assets/img/resFile (4).png"
                alt="file_url"
                v-if="item.suffix == 'zip' || item.suffix == 'rar'"
              />
              <img
                src="../../assets/img/resFile (5).png"
                alt="file_url"
                v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
              />
              <img
                src="../../assets/img/resFile (6).png"
                alt="file_url"
                v-if="item.suffix == 'doc' || item.suffix == 'docx'"
              />
              <img
                src="../../assets/img/resFile (7).png"
                alt="file_url"
                v-if="item.suffix == 'pdf'"
              />
              <img
                src="../../assets/img/resFile (8).png"
                alt="file_url"
                v-if="item.suffix == 'png' || item.suffix == 'jpg'"
              />
            </div>
            <div class="msg">
              <div class="title">
                <img src="../../assets/img/newBiaoqian.png" v-show="item.is_new == 1">
                <!--  -->
                <span v-if="item.is_tj == 1 && item.is_new !=1">推荐</span>{{ item.title }}
              </div>
              <!-- <p v-if="!item.lx || item.lx == 1" style="height: 80px">
              {{ item.intro == "" ? "暂无" : item.intro }}
            </p> -->
              <p v-html="item.sub_info" v-if="item.lx == 2"></p>
              <span v-if="item.lx == 2">......</span>
              <div class="bottom">
                <!-- <span class="upTime" v-if="item.from_int != 10">
                  更新于{{ timeStamp2String(item.update_time * 1000, 2) }}
                </span>
                <span
                  class="upTime"
                  v-if="item.from_int == 10"
                  style="color: #ff9b04"
                >
                  精选
                </span> -->
                <span class="rate" v-if="item.tjzs != 0"
                  ><span style="margin-right: 5px">精选指数</span>
                  <el-rate disabled v-model="item.tjzs"></el-rate
                ></span>
                <span class="rate" v-if="item.tjzs == 0"
                  ><span style="margin-right: 5px">暂无评分</span>
                </span>
                <span class="seeNum" v-if="!item.lx || item.lx == 1"
                  ><i class="el-icon-view"></i>{{ item.viewCount }}</span
                >
                <span class="seeNum" v-if="item.lx == 2"
                  ><i class="el-icon-view"></i>{{ item.view_nums }}</span
                >
              </div>
            </div>
            <div class="downLoad">查看全部</div>
          </div>
        </div>
        <!-- 课件列表 教研课和教学课模块-->
        <div class="kejianlist" v-if="kejianLists.length != 0">
          <div class="kejianBox" v-show="kejianLists != [] && bigtapvalue == 4">
            <div class="jiaoyan">
              <div
                class="box jiaoyanbox"
                v-for="item in kejianLists"
                :key="item.jyjxkinfo_id"
                @click="goJiaoyanclass(item.jyjxk_id)"
              >
                <img :src="item.fm_file_url" alt="" />
                <div class="activename">
                  {{ item.title }}
                </div>
                <p>主讲人：{{ item.teachers_title }}</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 课件列表 资源包模块-->
        <div
          class="kejianlist"
          v-if="kejianLists.length != 0 && bigtapvalue == 5"
        >
          <div
            class="ziyuanbaoLists"
            v-for="item in kejianLists"
            :key="item.id"
            @click="goresDetails(item.id, item.lx, item.suffix)"
            v-show="kejianLists != [] && bigtapvalue == 5"
          >
            <div class="pic">
              <img src="../../assets/img/ziyuanbaonew.png" />
            </div>
            <div class="msg">
              <div class="kejiantitle">
                <p>
                  {{ item.title }}
                </p>
              </div>
              <div class="ziyuanbaodetails">
                <span>内含：</span>
                <span
                  class="leixing"
                  v-for="list in item.kejianfl_arr"
                  :key="list.kejianfl_id"
                  >{{ list.kejianfl_title }}</span
                >
                <span
                  >共<a>{{ item.kejian_nums }}</a
                  >份资源</span
                >
              </div>
              <div class="bottom">
                <span class="upTime"
                  >更新于{{
                    timeStamp2String(item.update_time * 1000, 2)
                  }}</span
                >
                <span class="seeNum"
                  ><i class="el-icon-view"></i>{{ item.view_nums }}</span
                >
              </div>
            </div>
            <div class="downLoad">查看全部</div>
          </div>
        </div>
        <!-- 空图是否展示 -->
        <div class="nothing" v-show="kejianLists.length == 0">
          <p>抱歉，没有为您搜索到相关内容，可以去看看其他资源哦！</p>
          <img src="../../assets/img/nothing.png" alt="" />
        </div>

        <!-- 分页部分 -->
        <div class="page1" v-if="kejianLists.length > 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            background
            :page-sizes="[6, 10, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { timeStamp2String } from "../../utils/time";
import {
  list_kejianbao,
  kejianfl,
  list_kejiantag,
  nowkemu,
  userinfo,
  bookslists,
  chapterslists,
  list_kejian,
  chaptersinfo,
  jyjxkinfolists,
  tjlists,
  zyzxinfo,
  zyzxgs,
  zyzxfk,
  list_jyjxk,
  chapterskejian,
  list_systypes,
  nianjilists,
  tjlists_dy,
} from "../../api/http";
export default {
  name: "resourceCenter",
  data() {
    return {
      isExpandAll: false,
      gundongTop: 0, //滚动条高度
      kejianbooks_title: "", //当前学习的书本名
      kejianchapters_title: "", //当前学习的目录名
      timeLine: {}, //关键事件节点对象
      //用于顶部日期时间尺子
      monthNow: "", //当前几月
      currentMonthCount: 0, //本月天数
      nextMonthCount: 0, //下个月天数
      fenlei_radio: 1, //试卷分类值
      scrollY: 0, //资源库距离顶部位置
      start_date: "", //当前计划开始时间
      end_date: "", //当前计划结束时间
      stime: "", //开始的那一天
      etime: "", //结束的那天
      scolorTime: "", //时间尺绿色开始日期
      ecolorTime: "", //时间尺绿色开始日期
      smonth: "", //计划开始的月份
      emonth: "", //计划结束的月份
      kejianbao_nums: "", //资源包数量
      kejian_nums: "", //资源数量

      timeStamp2String, //时间戳转时间的函数

      // 资源定制部分
      dingzhishow: true, //定制部分是否展示
      //资源包信息介绍
      dingzhiNj_id: "", //用户个人当前的年级id
      contents: "", //整理来源介绍
      contents1: "", //教师教研介绍//一轮复习介绍
      contents2: "", //教师教学介绍//二轮复习介绍
      contents3: "", //学生学习介绍//三轮复习介绍 //暂无
      contents4: "", //真题试卷介绍
      //资源包下的教研课的视频列表

      dingzhiRadio: "1", //定制切换栏按钮默认值

      //高一高二
      gyezyLists: [], //教师教研课件包资
      gyespLists: [], //教师教学课件包数量
      gyezy1: 0, //高一二部分教师教研资源数量
      gyezy2: 0, //高一二部分教师教学资源数量
      gyezy3: 0, //高一二部分学生学习资源数量

      gyesp1: 0, //高一二部分教师教研视频数量
      gyesp2: 0, //高一二部分教师教学视频数量
      gyesp3: 0, //高一二部分学生学习视频数量

      radio: "1", //调查有用没用
      beikeFlag: false, //资源包hover样式切换
      n: 0, //当前鼠标移动到的资源包的id

      //高三部分
      gszyLists: [], //高三部分的最新资源列表
      gszxLists: [], //高三部分的专项列表
      gsspLists: [], //高三部分的视频列表
      gszy1: 0, //一轮复习课件包数量
      gszy2: 0, //二轮复习课件包数量
      gszy3: 0, //试卷课件包数量
      gszx1: 0, //一轮复习专项数量
      gszx2: 0, //二轮复习专项数量
      gszx3: 0, //试卷专项数量
      gssp1: 0, //一轮复习视频数量
      gssp2: 0, //二轮复习视频数量
      gssp3: 0, //试卷视频数量
      gs: 0, //高三部分鼠标移动到的资源包id
      gsyilunCh: 0, //高三部分鼠标移动到的资源包id
      gsyilunYf: 0, //高三部分鼠标移动到的资源包id
      gserlunL: 0, //高三部分鼠标移动到的资源包id
      gserlunR: 0, //高三部分鼠标移动到的资源包id
      nothingShow: false, //空图是否展示

      //资源库
      input: "", //资源库搜索框双向绑定内容
      searchTitle: "", //按回车键后保存要上传的搜索关键词
      fenleiRadio: 1, //当前选中的分类值，用于切换课件分类tap
      paper_radio: "", //当前选中的试卷二级分类列表
      currentPage: 1, //分页默认选中页

      //资源库数据的展示
      booksList: [], //左侧书本列表
      mululist: [], //根据书本id获取的目录列表
      defaultProps: {
        //书本目录对应后台数据的默认字段
        children: "lists",
        label: "title",
      },
      // bookNianji_id: 0, //获取图书列表第一本书的所属年级id，用于右侧分类
      kejianflList: [], //课件分类列表
      kejianfltaglist: [], //课件分类下的分类标签
      kejiantag_id: "", //课件分类标签id
      jyjxTagList: [
        { id: "all", title: "全部" },
        { id: "time", title: "最新课程" },
        { id: "xg", title: "相关课程" },
        { id: "play", title: "最多播放" },
      ], //教研课和教学课的标签
      //由下面参数决定资源页课件展示内容，点击切换相关选项可更改展示内容，初始默认内容由个人信息和当前目录版本信息里获取。
      kejianbooks_id: 0, //书本id
      kemu_id: 0, //当前科目id
      nianji_id: 0, //书本年级id
      kejianfl_id: "", //课件分类id
      kejiantagShow: false, //课件分类下的标签是否展示
      kejianversions_id: 0, //当前版本id
      kejianchapters_id: 0, //目录id
      systypes_id: 1, //系统大分类标签(1.课件.2.试卷.3.素材.4.专项)
      status: "", //状态
      page: 1, //页码
      page_size: 6, //分页大小
      kejianLists: [], //课件资源列表数据
      counts: 0, //当前请求到的课件总条数用于分页显示总数
      fk_status: "", //是否反馈过
      yy_status: "1", //是否有用
      fkshow: true, //提交是否有用的显示隐藏

      //后期添加
      gaosanEnglish: false, //是否为高三英语，高三英语一轮复习和二轮复习页面内容修改
      yilunBook_id: "", //一轮书本id
      erlunBook_id: "", //二轮书本id
      gsEnYlChList: [], //高三英语一轮复习词汇列表
      gsEnYlYfList: [], //高三英语一轮复习语法列表
      gsEnCh: "", //高三英语一轮复习词汇列表第一个课件id
      gsEnYf: "", //高三英语一轮复习词汇列表第一个课件id
      gsEnElList: [], //高三英语二轮复习列表
      cihui_id: "", //高三英语一轮复习词汇目录id
      yufa_id: "", //高三英语一轮复习语法目录id

      //后期添加面包屑筛选记录所需内容
      mb_bookTitle: "", //书本名
      mb_muluTitle: "", //书本目录名
      // mb_kewenTitle: "", //课文名
      mb_tapTitle: "", //分类名
      mb_tagTitle: "", //标签名
      bookIndex: 0, //第几本书
      mb_page: 1, //记录保存页数

      // 4.2迭代使用
      kejianversions_title: "", //当前教学版本名
      menus: [
        { id: "1", title: "同步资源" },
        { id: "2", title: "试卷" },
        { id: "3", title: "素材库" },
        { id: "4", title: "教学课" },
      ], //模块大分类
      bigTap: "1", //大菜单栏选项值
      bigtapvalue: "1", //大分类选定值
      bigTitle: "同步资源", //大菜单栏选项mingcheng
      chosedbook: "", //资源目录展示的选择的图书
      chosedmulu1: "", //资源目录展示的选择的第一个目录
      chosedmulu2: "", //资源目录展示的选择的第二个目录
      chosedmulu3: "", //资源目录展示的选择的第三个目录
      mulutree: [0, 1, 2, 3], //保留的单元id
      mulu1: {}, //同步资源左侧资源目录点击删除使用node
      mulu2: {}, //同步资源左侧资源目录点击删除使用node
      mulu3: {}, //同步资源左侧资源目录点击删除使用node

      tbzyb: [], //同步资源课件顶部资源包展示列表

      shijuantap: "", //试卷大分类id
      sjflList: [], //试卷分类列表
      sjdqNum: 8, //试卷地区分类展示数量
      sjnfNum: 7, //试卷年份分类展示数量
      getalldqshow: true, //试卷地区分类展开全部显示隐藏
      getallnfshow: true, //试卷年份分类展开全部显示隐藏
      nianjilists: [], //年级列表
      diquLists: [], //地区列表
      nianfenLists: [], //年份列表
      nian_ids: "", //年份id
      dq_ids: "", //地区id

      sucaitap: "", //素材大分类id
      scflList: [], //素材分类列表
      scTagList: [
        { id: 0, title: "全部" },
        { id: 1, title: "最近一天" },
        { id: 7, title: "最近一周" },
        { id: 30, title: "最近一月" },
        { id: 365, title: "今年发布" },
      ], //素材标签列表
      days: 0, //素材近期
      ziyuanbaochapters_id: "", //资源包目录id
      ziyuanbaochaptersLists: [], //资源包目录列表

      classof: "all", //教学课选择分类
    };
  },
  created() {
    this.getzyall();
    console.log(this.$route.query, "query参数");

    this.gundongTop = this.$route.query.Top;
    document.documentElement.scrollTop = this.gundongTop ? this.gundongTop : 0;
    this.paper_radio = this.$route.query.mb_tag_id
      ? this.$route.query.mb_tag_id
      : "";

    if (this.$route.query.mb_type_id) {
      this.systypes_id = this.$route.query.mb_type_id;
    }

    if (
      this.$route.query.mb_searchTitle &&
      this.$route.query.mb_searchTitle != ""
    ) {
      this.searchTitle = this.$route.query.mb_searchTitle;
      this.input = this.$route.query.mb_searchTitle;
    }
    if (this.$route.query.mb_tag_id) {
      this.kejiantag_id = this.$route.query.mb_tag_id;
    }
    if (this.$route.query.mb_bookIndex) {
      this.bookIndex = this.$route.query.mb_bookIndex;
    }
    // if (this.$route.query.mb_book_id) {
    //   this.kejianbooks_id = this.$route.query.mb_book_id;
    // }
    if (this.$route.query.mb_tap_id) {
      this.kejianfl_id = this.$route.query.mb_tap_id;
    }
    if (this.$route.query.mb_tapTitle) {
      this.mb_tapTitle = this.$route.query.mb_tapTitle;
    }
    if (this.$route.query.mb_mulu_id) {
      this.kejianchapters_id = this.$route.query.mb_mulu_id;
    }
    if (this.$route.query.mb_tagTitle) {
      this.mb_tagTitle = this.$route.query.mb_tagTitle;
    }
    if (this.$route.query.mb_tag_id) {
      this.kejiantag_id = this.$route.query.mb_tag_id;
    }
    if (this.$route.query.mb_page) {
      this.page = this.$route.query.mb_page;
      this.currentPage = this.$route.query.mb_page;
      this.mb_page = this.$route.query.mb_page;
    }
    // //回到顶部
    // $(document).ready(function () {
    //   $(window).scrollTop(this.$route.query.Top );
    // });
    this.getuserinfo(); //获取当前个人信息

    //获取当前科目和版本
    nowkemu({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "当前科目和版本");
      const data = res.retRes;
      this.dingzhiNj_id = data.nianji_id; //用户个人当前的年级id
      if (this.dingzhiNj_id != 11) {
        this.menus.push({ id: "5", title: "资源包" });
      }
      this.nianji_id = this.$route.query.mb_nj_id
        ? this.$route.query.mb_nj_id
        : data.nianji_id; //当前年级id
      console.log(this.nianji_id, "当前年级id");
      this.status = data.is_now; //是否当前
      //如果当前的版本或科目为0，跳转到选择版本页
      if (data.kejianversions_id == 0 || data.kemu_id == 0) {
        this.$alert("您还未选择学科或版本，请先前往选择", "温馨提示", {
          confirmButtonText: "确定",
          callback: () => {
            this.$router.push({
              name: "ChangeClass",
            });
          },
        });
        //如果当前的计划开始时间结束时间不存在或科目为0，跳转到设置教学计划
      } else if (data.have_plan == 0) {
        this.$alert("您目前还没有教学计划，请先前往设置", "温馨提示", {
          confirmButtonText: "确定",
          callback: () => {
            this.$router.push({
              name: "MyTeachPlan",
            });
          },
        });
      } else {
        // this.ziyuanbaochapters_id = data.kejianchapters_id; //资源包当前目录id
        this.kejianversions_title = data.kejianversions_title; //当前版本名
        this.kejianversions_id = data.kejianversions_id; //当前版本id
        //如果是首页最新资源查看更多跳转过来
        if (this.$route.query.from && this.$route.query.from == "index") {
          this.kejianbooks_id = ''
          this.kejianchapters_id = "";
        } else {
          this.kejianchapters_id =
            this.$route.query.mb_mulu_id && this.$route.query.mb_mulu_id == "0"
              ? this.$route.query.mb_mulu_id
              : data.kejianchapters_id; //当前目录id
        }

        this.kejianbooks_id = this.$route.query.mb_book_id
          ? this.$route.query.mb_book_id
          : data.kejianbooks_id; //当前书本id
        // this.start_date = data.start_date; //教学计划开始时间
        // this.end_date = data.end_date; //教学计划结束时间
        this.kemu_id = data.kemu_id; //当前科目id
        this.kejianbooks_title = this.$route.query.mb_bookTitle
          ? this.$route.query.mb_bookTitle
          : data.kejianbooks_title; //当前学习的书本名
        this.mb_bookTitle = this.$route.query.mb_bookTitle
          ? this.$route.query.mb_bookTitle
          : data.kejianbooks_title; //当前学习的书本名

        //如果是首页最新资源查看更多跳转过来,只保留书本，去除掉目录
        if (this.$route.query.from && this.$route.query.from == "index") {
          this.kejianbooks_id = ''
          this.chosedbook = ''
          this.kejianchapters_id = "";
          this.kejianchapters_title = "";
          this.mb_muluTitle = "";
          this.chosedmulu1 = "";
        } else {
          this.kejianchapters_title = this.$route.query.mb_muluTitle
            ? this.$route.query.mb_muluTitle
            : data.kejianchapters_title; //当前学习的目录名
          this.mb_muluTitle = this.$route.query.mb_muluTitle
            ? this.$route.query.mb_muluTitle
            : data.kejianchapters_title; //当前学习的目录名
          this.timeLine = data.timeline;
          this.chosedmulu1 = this.$route.query.mb_muluTitle
            ? this.$route.query.mb_muluTitle
            : data.kejianchapters_title; //左侧资源目录下默认的选中单元
            this.chosedbook = this.$route.query.mb_bookTitle
          ? this.$route.query.mb_bookTitle
          : data.kejianbooks_title;
        }

        
      }
      //获取书本列表
      bookslists({
        md5key: localStorage.getItem("md5key"),
        kejianversions_id: this.kejianversions_id,
        kemu_id: this.kemu_id,
      }).then((res) => {
        this.booksList = res.retRes;
        console.log(res, "书本列表");
        if (this.kejianbooks_id == 0) {
          // this.kejianbooks_id = this.booksList[0].id;
          this.nianji_id = "";
          this.kejianflList = [];
        }
        if (this.$route.query.mb_book_id) {
          this.booksList.forEach((item, index) => {
            if (this.$route.query.mb_book_id == item.id) {
              this.bookIndex = index;
            }
          });
          this.kejianbooks_id = this.booksList[this.bookIndex].id;
        }
        //获取书本目录列表
        chapterslists({
          md5key: localStorage.getItem("md5key"),
          kejianbooks_id: this.kejianbooks_id,
          // pid: this.kejianchapters_id,
        }).then((res) => {
          this.mululist = res.retRes;
          // this.ziyuanbaochaptersLists = res.retRes; //资源包目录列表
          console.log(res, "书本目录");
        });
        //获取资源包下的分类（目录）
        tjlists_dy({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          this.ziyuanbaochaptersLists = res.retRes; //资源包目录列表
          console.log(res, "获取资源包下的分类（目录）");
        });
        //如果是精选资源的精选试卷跳转过来的，默认展示试卷内容
        if (this.$route.query.fliter && this.$route.query.fliter == "sj") {
          this.bigtapvalue = 2;
          this.bigTap = "2";
          this.systypes_id = 2;
          this.nianji_id = "";
        } else if (
          this.$route.query.fliter &&
          this.$route.query.fliter == "sc"
        ) {
          this.systypes_id = 3;
          this.bigTap = "3";
          this.bigtapvalue = 3;
        }
        this.getshijaunfl(); //获取试卷分类
        this.getsucaifl(); //获取试卷分类
        this.getdqnf(); //获取试卷分类的年份地区
        if (this.$route.query.bigTap) {
          this.bigTap = this.$route.query.bigTap;
          this.bigtapvalue = this.$route.query.bigTap;
          const mb_bigtap = this.$route.query.bigTap;
          if (mb_bigtap == 1) {
            this.systypes_id = 1;
            this.bigtapvalue = 1;
            this.bigTitle = "同步资源";
            if (
              !this.$route.query.mb_nj_id ||
              this.$route.query.mb_nj_id == 0
            ) {
              this.nianji_id = "";
              this.chosedbook = "";
              this.chosedmulu1 = "";
              this.chosedmulu2 = "";
              this.chosedmulu3 = "";
              this.kejianbooks_id = "";
              this.mb_bookTitle = "";
              this.kejianchapters_id = "";
              this.mb_muluTitle = "";
              this.getkejianfl(); //获取课件分类
            } else if (
              !this.$route.query.mb_mulu_id ||
              this.$route.query.mb_mulu_id == 0
            ) {
              this.chosedmulu1 = "";
              this.chosedmulu2 = "";
              this.chosedmulu3 = "";
              this.kejianchapters_id = "";
              this.mb_muluTitle = "";
              this.getkejianfl(); //获取课件分类
            } else {
              this.kejianchapters_id =
                this.$route.query.mb_mulu_id ||
                this.$route.query.mb_mulu_id == "0"
                  ? this.$route.query.mb_mulu_id
                  : data.kejianchapters_id; //当前目录id
              this.getkejianfl(); //获取课件分类
            }
          } else if (mb_bigtap == 2) {
            this.systypes_id = 2;
            this.bigtapvalue = 2;
            this.nianji_id = "";
            this.kejianfl_id = 0;
            this.bigTitle = "试卷";
            this.getkejianlists();
          } else if (mb_bigtap == 3) {
            this.systypes_id = 3;
            this.bigtapvalue = 3;
            this.kejianfl_id = 0;
            this.bigTitle = "素材库";
            this.getkejianlists();
          } else if (mb_bigtap == 4) {
            this.bigtapvalue = 4;
            this.kejianfl_id = 0;
            this.bigTitle = "教学课";
            this.getjxk();
          } else if (mb_bigtap == 5) {
            this.bigtapvalue = 5;
            this.kejianfl_id = 0;
            this.bigTitle = "资源包";
            console.log(this.ziyuanbaochaptersLists);
            this.ziyuanbaochapters_id = this.$route.query.dy_id;
            this.getkejianbaolists();
          }
        } else {
          this.getkejianfl(); //获取课件分类
        }
      });
    });
  },
  mounted() {
    // setTimeout(() => {
    //   const date = new Date(); //获取当前日期
    //   const dateWidth = 38; //每个日期格的宽度
    //   const sTime = new Date(this.start_date).getTime(); //开始日期
    //   const eTime = new Date(this.end_date).getTime(); //结束日期
    //   const diffDate = eTime - sTime; //开始时间戳减去结束时间戳
    //   const timeLong = Math.floor(diffDate / (1000 * 3600 * 24)); //计划共多少天
    //   this.stime = this.timeStamp2String(sTime, 10); //计划从几号开始
    //   this.etime = this.timeStamp2String(eTime, 10); //计划到几号结束
    //   this.smonth = this.timeStamp2String(sTime, 4); //计划几月开始
    //   this.emonth = this.timeStamp2String(eTime, 4); //计划几月结束
    //   const today = new Date().getDate(); //今天几号
    //   this.currentMonthCount = new Date(
    //     date.getFullYear(),
    //     date.getMonth() + 1,
    //     0
    //   ).getDate(); //获取本月天数
    //   this.monthNow = new Date().getMonth() + 1; //本月月份
    //   const mask = document.getElementsByClassName("mask")[0];
    //   // mask.style.width = (timeLong + 1) * dateWidth + "px";
    //   const tips = document.getElementsByClassName("today")[0];
    //   //如果今天是一号，给到tips左边7px的边距
    //   if (today == 1) {
    //     tips.style.left = 7 + "px";
    //   } else {
    //     tips.style.left = (today - 1) * dateWidth + "px";
    //   }
    //   // mask.style.left = (this.stime - 1) * dateWidth + "px";
    //   if (this.monthNow > this.smonth && this.monthNow == this.emonth) {
    //     mask.style.width = this.etime * dateWidth + "px"; //结束日期之前全部选中
    //     mask.style.left = 0 + "px"; //1号开始
    //     this.scolorTime = 1; //绿色字体从1号开始
    //     this.ecolorTime = this.etime; //绿色字体在31号结束
    //     // console.log(this.etime,"哈哈哈啊哈哈哈哈哈哈")
    //   } else if (this.monthNow > this.smonth && this.monthNow < this.emonth) {
    //     mask.style.width = this.currentMonthCount * dateWidth + "px"; //本月天数全部选中
    //     mask.style.left = 0 + "px"; //1号开始
    //     this.scolorTime = 1; //绿色字体从1号开始
    //     this.ecolorTime = 31; //绿色字体在31号结束
    //   } else if (this.monthNow == this.smonth && this.monthNow == this.emonth) {
    //     mask.style.left = (this.stime - 1) * dateWidth + "px"; //开始日期开始
    //     mask.style.width = (this.etime - this.stime + 1) * dateWidth + "px"; //结束日期之前全部选中
    //     this.scolorTime = this.stime; //绿色字体从开始日期开始
    //     this.ecolorTime = this.etime; //绿色字体在结束日期结束
    //   } else if (this.monthNow == this.smonth && this.monthNow < this.emonth) {
    //     mask.style.left = (this.stime - 1) * dateWidth + "px"; //开始日期开始
    //     mask.style.width =
    //       (this.currentMonthCount - this.stime + 2) * dateWidth + "px"; //本月最后一天减去开始那天加两天
    //     this.scolorTime = this.stime; //绿色字体从开始日期开始
    //     this.ecolorTime = 31; //绿色字体在31号结束
    //   }
    //   // console.log(
    //   //   new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(),
    //   //   "哈哈哈啊哈哈哈哈哈哈"
    //   // );
    //   console.log(this.scolorTime, this.ecolorTime);
    //   // this.isplanColor = date>=sTime && date<=eTime
    // }, 1000);
    // //监听滚动
    // window.addEventListener("scroll", this.handleScrollY, true);
  },
  methods: {
    //获取个人信息，判断试用是否过期
    getuserinfo() {
      userinfo({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        //试用已过期去重新登录
        if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
          this.$router.push({
            name: "Login",
            query: {
              isgq: 1,
            },
          });
        }
      });
    },
    //获取课件分类
    getkejianfl() {
      kejianfl({
        md5key: localStorage.getItem("md5key"),
        nianji_id: this.nianji_id,
        systypes_id: 1,
      }).then((res) => {
        if (res.retRes.length == 0) {
          this.kejianflList = [];
        } else {
          this.kejianflList = res.retRes;
          const allTaps = { id: 0, systypes_id: 1, title: "全部" };
          this.kejianflList.unshift(allTaps); //增加一个全部的分类，这个分类获取列表不需要传课件分类和课件标签分类
          this.kejianfl_id = this.$route.query.mb_tap_id
            ? this.$route.query.mb_tap_id
            : res.retRes[0].id; //暂时课件分类id取第一个
          this.mb_tapTitle = this.$route.query.mb_tapTitle
            ? this.$route.query.mb_tapTitle
            : res.retRes[0].title; //分类第一用作面包屑默认筛选条件
        }
        console.log(res.retRes, "课件分类");

        this.getkejianlists(); //获取课件列表
      });
    },
    //获取试卷分类
    getshijaunfl() {
      kejianfl({
        md5key: localStorage.getItem("md5key"),
        nianji_id: this.dingzhiNj_id,
        systypes_id: 2,
      }).then((res) => {
        const shijuantap = res.retRes[0].id;
        list_kejiantag({
          md5key: localStorage.getItem("md5key"),
          kejianfl_id: shijuantap,
          kemu_id: this.kemu_id,
          nianji_id: this.dingzhiNj_id,
        }).then((res) => {
          console.log(res, "试卷分类");
          this.sjflList = res.retRes;
        });
      });
      //获取年级列表
      nianjilists().then((res) => {
        console.log(res, "年级列表");
        this.nianjilists = res.retRes;
      });
    },
    //获取地区，年份
    getdqnf() {
      list_systypes({
        type_str: "dq",
      }).then((res) => {
        // console.log(res, "地区");
        this.diquLists = res.retRes;
      });
      list_systypes({
        type_str: "nian",
      }).then((res) => {
        // console.log(res, "年份");
        this.nianfenLists = res.retRes;
      });
    },
    //获取课件列表
    getkejianlists() {
      list_kejian({
        md5key: localStorage.getItem("md5key"),
        title: this.searchTitle,
        kemu_id: this.kemu_id,
        nianji_ids: this.nianji_id, //年级id暂时因数据原因不传
        type_id: this.systypes_id,
        kejianfl_id: this.kejianfl_id, //暂时为第一个分类,点击课件分类后更改
        kejianversions_id: this.kejianversions_id, //版本id
        kejianbooks_id: this.bigtapvalue != 2 ? this.kejianbooks_id : "", //初始为当前,点击书本更改
        kejianchapters_id: this.bigtapvalue != 2 ? this.kejianchapters_id : "", //初始为当前,点击目录更改
        kejiantag_id: this.$route.query.mb_tag_id
          ? this.$route.query.mb_tag_id
          : this.kejiantag_id,
        of: "time",
        days: this.days, //素材近期
        page: this.page, //页面默认1
        page_size: this.page_size, //默认20
        //试卷
        nian_ids: this.nian_ids,
        dq_ids: this.dq_ids,
      }).then((res) => {
        console.log(res, "课件列表");
        const data = res.retRes;
        this.kejianLists = data;
        this.counts = res.retCounts;
        console.log(this.kejianLists, "123123121312312313");
      });
    },
    //获取素材分类
    getsucaifl() {
      kejianfl({
        md5key: localStorage.getItem("md5key"),
        nianji_id: this.dingzhiNj_id,
        systypes_id: 3,
      }).then((res) => {
        this.sucaitap = res.retRes[0].id;
        list_kejiantag({
          md5key: localStorage.getItem("md5key"),
          kejianfl_id: this.sucaitap,
          kemu_id: this.kemu_id,
          nianji_id: this.dingzhiNj_id,
        }).then((res) => {
          console.log(res, "素材分类");
          this.scflList = res.retRes;
          // this.scflList.unshift({id:0,title:'全部'})
        });
      });
    },
    //获取教学课
    getjxk() {
      list_jyjxk({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
        nianji_id: this.nianji_id,
        kejianversions_id: this.kejianversions_id,
        kejianbooks_id: this.kejianbooks_id,
        kejianchapters_id: this.kejianchapters_id,
        jyjxtags_id: 2,
        of: this.classof,
        page: this.page, //页面默认1
        page_size: this.page_size, //默认
      }).then((res) => {
        console.log(res, "教学课列表");
        const data = res.retRes;
        this.kejianLists = data;
        this.counts = res.retCounts;
      });
    },
    //选择素材下的分类标签
    chosesucaiTagfl(id) {
      this.page = 1;
      this.currentPage = 1;
      this.days = id;
      this.getkejianlists();
    },
    //选择教研课教学课分类下的分类标签
    chosejyjxTagfl(id) {
      this.page = 1;
      this.currentPage = 1;
      this.classof = id;
      this.getjxk();
    },
    //获取资源中心数据
    getzyall() {
      if (this.dingzhiNj_id != 11) {
        //获取进入页面后上半部分的资源包和当前计划的高一高二相关数据
        zyzxinfo({
          md5key: localStorage.getItem("md5key"),
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "课件包数据信息汇总");
            const data = res.retRes;
            if (
              data.info_2.zy_lists.length > 0 &&
              data.info_3.zy_lists.length > 0
            ) {
              this.tbzyb.push(data.info_2.zy_lists[0]);
              this.tbzyb.push(data.info_3.zy_lists[0]);
            } else if (
              data.info_1.zy_lists.length > 0 &&
              data.info_2.zy_lists.length == 0 &&
              data.info_3.zy_lists.length > 0
            ) {
              this.tbzyb.push(data.info_1.zy_lists[0]);
              this.tbzyb.push(data.info_3.zy_lists[0]);
            } else if (
              data.info_1.zy_lists.length > 0 &&
              data.info_2.zy_lists.length > 0 &&
              data.info_3.zy_lists.length == 0
            ) {
              this.tbzyb.push(data.info_1.zy_lists[0]);
              this.tbzyb.push(data.info_2.zy_lists[0]);
            } else {
              this.tbzyb = [];
            }
          }
        });
      }
    },
    //获取课件包列表
    getkejianbaolists() {
      list_kejianbao({
        md5key: localStorage.getItem("md5key"),
        type_id: 1,
        kemu_id: this.kemu_id,
        nianji_ids: this.nianji_id,
        kejianversions_id: this.kejianversions_id, //版本id
        // kejianbooks_id: this.kejianbooks_id, //初始为当前,点击书本更改
        kejianchapters_id: this.ziyuanbaochapters_id, //初始为当前,点击目录更改
        page: this.page, //页面默认1
        page_size: this.page_size, //默认20
      }).then((res) => {
        console.log(res, "资源包列表");
        const data = res.retRes;
        this.kejianLists = data;
        this.counts = res.retCounts;
      });
    },
    //前往修改学科版本
    gokemu() {
      this.$router.push({
        name: "ChangeClass",
      });
    },
    //切换大菜单
    changeTap(tap) {
      document.documentElement.scrollTop = 0;
      this.bigTap = tap;
      this.page = 1;
      this.currentPage = 1;
      this.days = "";
      console.log(tap);
      if (tap != 2) {
        this.nian_ids = "";
        this.dq_ids = "";
        //收起试卷地区、年份分类
      }
      this.kejiantag_id = "";
      if (tap == 1) {
        this.systypes_id = 1;
        this.bigtapvalue = 1;
        this.bigTitle = "同步资源";
        this.getkejianfl(); //获取课件分类
      } else if (tap == 2) {
        this.systypes_id = 2;
        this.bigtapvalue = 2;
        this.nianji_id = "";
        this.kejianfl_id = 0;
        this.bigTitle = "试卷";
        this.getkejianlists();
      } else if (tap == 3) {
        this.systypes_id = 3;
        this.bigtapvalue = 3;
        this.kejianfl_id = 0;
        this.bigTitle = "素材库";
        this.getkejianlists();
      } else if (tap == 4) {
        this.bigtapvalue = 4;
        this.kejianfl_id = 0;
        this.bigTitle = "教学课";
        this.getjxk();
      } else if (tap == 5) {
        this.bigtapvalue = 5;
        this.kejianfl_id = 0;
        this.bigTitle = "资源包";
        console.log(this.ziyuanbaochaptersLists);
        this.ziyuanbaochapters_id =
          this.ziyuanbaochaptersLists.length > 0
            ? this.ziyuanbaochaptersLists[0].dy_id
            : 0;
        this.getkejianbaolists();
      }
    },
    //展开试卷全部地区分类
    getalldq() {
      list_systypes({
        type_str: "dq",
      }).then((res) => {
        // console.log(res, "地区");
        this.diquLists = res.retRes;
        this.sjdqNum = res.retRes.length + 1;
        this.getalldqshow = false;
      });
    },
    //展开试卷全部年份分类
    getallnf() {
      list_systypes({
        type_str: "nian",
      }).then((res) => {
        // console.log(res, "年份");
        this.nianfenLists = res.retRes;
        this.sjnfNum = res.retRes.length + 1;
        this.getallnfshow = false;
      });
    },
    //收起试卷全部地区分类
    getsomedq() {
      this.sjdqNum = 8; //收起试卷地区分类
      this.getalldqshow = true;
    },
    //收起试卷全部年份分类
    getsomenf() {
      this.sjnfNum = 7; //收起试卷年份分类
      this.getallnfshow = true;
    },
    //tap栏的置顶效果
    handleScrollY() {
      // console.log(document.documentElement.scrollTop,"滚动条高度高度")
      const beikeTaps = document.getElementsByClassName("beikeTaps")[0]; //需要置顶的教师教研tap栏
      // const kejianTaps = document.getElementsByClassName("kejianTaps")[0]; //需要置顶的课件分类tap栏
      // const resFl = document.getElementsByClassName("resFl")[0]; //需要置顶的资源分类左侧栏
      // const kejianTop = document.getElementsByClassName("top")[0]; //需要置顶的资源分类左侧栏
      const dingzhi = document.getElementsByClassName("dingzhi")[0];
      const recommend = document.getElementsByClassName("recommend")[0];
      // console.log(secondTop.getBoundingClientRect().top)
      // console.log(
      //   document.getElementsByClassName("recommend")[0].getBoundingClientRect()
      //     .bottom
      // );
      // console.log(
      //   document.getElementsByClassName("dingzhi")[0].getBoundingClientRect().bottom
      // );
      const x = dingzhi.getBoundingClientRect().top;
      const y = recommend.getBoundingClientRect().bottom;

      // console.log(x, y,"15316531279189378")
      if (x <= -10 && y > 180) {
        beikeTaps.style.position = "fixed";
        // kejianTaps.style.position = "static";
        // resFl.style.position = "static";
        // kejianTop.style.position = "static"
      } else if (x > -10) {
        beikeTaps.style.position = "static";
        // kejianTaps.style.position = "static";
        // resFl.style.position = "static";
      } else if (y < 100) {
        beikeTaps.style.position = "static";
        // kejianTaps.style.position = "fixed";
        // // resFl.style.position = "fixed";
        // kejianTop.style.position = "fixed"
      }
    },
    //点击切换资源库书本选择,更换当前书本id，获取相对应的目录内容
    handleBook(id) {
      document.documentElement.scrollTop = 0;
      console.log(id, "tit");
      this.kejianbooks_id = id;
      //获取书本目录列表
      chapterslists({
        md5key: localStorage.getItem("md5key"),
        kejianbooks_id: this.kejianbooks_id,
        // pid: this.kejianchapters_id,
      }).then((res) => {
        this.mululist = res.retRes;
        console.log(res, "书本目录");
      });
    },
    //点击不同的书本，获取书本版本对应的年级id，根据年级id 获取相对应的资源课件分类列表
    choseBook(nianji_id, title, index) {
      this.kejianfl_id = 0;
      this.mb_tapTitle = "全部";
      this.input = "";
      this.page = 1;
      this.currentPage = 1;
      this.paper_radio = "";
      this.kejiantag_id = "";
      this.kejianchapters_id = "";
      this.mb_muluTitle = "";
      console.log(this.kejianchapters_id, 12312312312);
      this.nianji_id = nianji_id;
      this.mb_bookTitle = title; //点击书本，更新筛选记录书本名
      this.bookIndex = index; //点击的第几本书
      this.chosedbook = title; //资源目录的选择图书切换
      this.chosedmulu1 = "";
      this.chosedmulu2 = "";
      this.chosedmulu3 = "";
      this.getkejianfl(); //获取课件分类
    },
    //点击切换目录
    handleNodeClick(e, f) {
      console.log(f);
      this.mulutree = f;
      this.input = "";
      this.searchTitle = "";
      this.page = 1;
      this.currentPage = 1;
      this.paper_radio = "";
      this.kejiantag_id = "";
      //填补资源目录选择模块
      if (f.level == 1) {
        this.chosedmulu1 = e.title;
        this.mulu1 = f;
      } else if (f.level == 2) {
        this.chosedmulu2 = e.title;
        this.mulu2 = f;
      } else if (f.level == 3) {
        this.chosedmulu3 = e.title;
        this.mulu3 = f;
      }
      console.log(this.mulu1, this.mulu2, this.mulu3, "123");
      //切换目录获取课件列表
      if (this.kejianchapters_id != e.id) {
        //针对tree组件点击无法收起
        this.kejianchapters_id = e.id;
        if (this.kejianfl_id == 0) {
          //获取进入页面后根据个人信息展示的课件列表
          this.kejianchapters_id = e.id;
          this.getkejianlists(); //获取课件列表
        } else if (this.kejianfl_id > 0 && this.kejianfl_id < 10000) {
          this.getkejianlists(); //获取课件列表
        }
        this.mb_muluTitle = e.title; //点击选择目录，更新筛选目录名
      }
    },
    //点击删除选中图书项
    delechosedbook() {
      this.nianji_id = "";
      this.chosedbook = "";
      this.chosedmulu1 = "";
      this.chosedmulu2 = "";
      this.chosedmulu3 = "";
      this.kejianbooks_id = "";
      this.mb_bookTitle = "";

      this.kejianchapters_id = "";
      this.mb_muluTitle = "";

      this.page = 1;
      this.currentPage = 1;
      this.getkejianfl();
    },
    //点击删除第一个目录
    delechosedmulu1() {
      // this.kejianbooks_id = "";
      this.chosedmulu1 = "";
      this.chosedmulu2 = "";
      this.chosedmulu3 = "";
      this.kejianchapters_id = "";
      this.mb_muluTitle = "";
      this.page = 1;
      this.currentPage = 1;
      console.log(this.mulutree);
      this.mulu1.expanded = false;
      this.mulu1.isCurrent = false;
      this.getkejianfl();
    },
    //点击删除第二个目录
    delechosedmulu2() {
      this.kejianchapters_id = this.mulu1.data.id;
      this.chosedmulu2 = "";
      this.chosedmulu3 = "";
      this.mulu2.expanded = false;
      this.mulu2.isCurrent = false;
      this.page = 1;
      this.currentPage = 1;
      this.getkejianfl();
    },
    //点击删除第三个目录
    delechosedmulu3() {
      this.kejianchapters_id = this.mulu2.data.id;
      this.chosedmulu3 = "";
      this.mulu3.expanded = false;
      this.mulu3.isCurrent = false;
      this.page = 1;
      this.currentPage = 1;
      this.getkejianfl();
    },
    //点击选中课件分类
    choseKejianfl(id, systypes_id, title) {
      console.log(id, systypes_id);
      this.mb_tapTitle = title; //点击分类，更新面包屑筛选分类名
      this.page = 1;
      this.currentPage = 1;
      this.kejianfl_id = id;
      this.systypes_id = systypes_id;
      this.paper_radio = "";
      this.kejiantag_id = "";
      this.getkejianlists(); //获取课件列表
    },
    //选择试卷分类
    chosedsjfl(id) {
      this.kejiantag_id = id;
      this.page = 1;
      this.currentPage = 1;
      this.getkejianlists();
    },
    //选中试卷年级分类
    chosedsjnj(id) {
      this.nianji_id = id;
      this.page = 1;
      this.currentPage = 1;
      this.getkejianlists();
    },
    //选中试卷地区分类
    chosedsjdq(id) {
      this.dq_ids = id;
      this.page = 1;
      this.currentPage = 1;
      this.getkejianlists();
    },
    //选中试卷年份分类
    chosedsjnf(id) {
      this.nian_ids = id;
      this.page = 1;
      this.currentPage = 1;
      this.getkejianlists();
    },
    //试卷分类中分别选中全部
    choseall(type) {
      if (type == "fl") {
        this.kejiantag_id = "";
        this.getkejianlists();
      } else if (type == "nianji") {
        this.nianji_id = "";
        this.getkejianlists();
      } else if (type == "diqu") {
        this.dq_ids = "";
        this.getkejianlists();
      } else if (type == "nianfen") {
        this.nian_ids = "";
        this.getkejianlists();
      }
    },
    //选择sucai分类
    chosedscfl(id) {
      this.kejiantag_id = id;
      this.page = 1;
      this.currentPage = 1;
      this.getkejianlists();
    },
    //选择资源包分类
    chosedzybfl(id) {
      this.ziyuanbaochapters_id = id;
      this.page = 1;
      this.currentPage = 1;
      this.getkejianbaolists();
    },
    //前往校验课内容
    goJiaoyanclass(jyjxk_id) {
      this.$router.push({
        name: "JiaoyanClass",
        query: {
          id: jyjxk_id,
          path: this.$route.path,
          routeName: this.bigTitle,
        },
      });
    },
    // 前往备课资源包
    gokejianbaoRes(id, lx) {
      console.log(id, lx);
      if (lx == 1) {
        let { href } = this.$router.resolve({
          path: "/resource/resDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            path: this.$route.path,
            routeName: this.bigTitle,
          },
        });
        window.open(href, "_blank");
      } else {
        let { href } = this.$router.resolve({
          path: "/resource/beikeziyuan",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            path: this.$route.path,
            routeName: this.bigTitle,
            dy_id: this.ziyuanbaochapters_id,
          },
        });
        window.open(href, "_blank");
      }
    },
    //教研课最新课程排列
    newclass() {
      this.paixu_radio = 1;
    },
    //分页
    //调整每页条数
    handleSizeChange(val) {
      console.log("每页条数调整为", val);
      this.page_size = val;
      this.page = 1;
      this.currentPage = 1;

      if (this.bigtapvalue == 4) {
        this.getjxk(); //获取教学课
      } else if (this.bigtapvalue == 5) {
        this.getkejianbaolists();
      } else {
        this.getkejianlists(); //获取课件列表
      }
    },
    //跳转第几页
    handleCurrentChange(val) {
      console.log("当前页为第", val);
      this.mb_page = val;
      this.page = val;
      if (this.bigtapvalue == 4) {
        this.getjxk(); //获取教学课
      } else if (this.bigtapvalue == 5) {
        this.getkejianbaolists();
      } else {
        this.getkejianlists(); //获取课件列表
      }
    },
    //点击课件前往课件详情
    goresDetails(id, lx, suffix) {
      console.log(id, lx);
      //有分类型，并且类型为贝壳资源包
      if (lx && lx == 2 && suffix != "rar" && suffix != "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/beikeziyuan",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.bigtapvalue == 1 ? this.mb_bookTitle : "", //书本名
            mb_muluTitle: this.bigtapvalue == 1 ? this.mb_muluTitle : "", //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.bigtapvalue == 1 ? this.mb_tapTitle : "", //分类名
            mb_tagTitle: this.bigtapvalue == 1 ? this.mb_tagTitle : "", //标签名
            bookid: this.bigtapvalue == 1 ? this.kejianbooks_id : "", //书本id
            muluid: this.bigtapvalue == 1 ? this.kejianchapters_id : "", //目录id
            fenleiid: this.bigtapvalue == 1 ? this.kejianfl_id : "", //分类id
            tgid: this.bigtapvalue == 1 ? this.kejiantag_id : "", //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
            path: this.$route.path,
            routeName: this.bigTitle,
            bigTap: this.bigtapvalue,
            dy_id: this.ziyuanbaochapters_id,
          },
        });
        window.open(href, "_blank");
        //有分类型，并且类型为课件
      } else if (lx && lx == 1 && suffix != "rar" && suffix != "zip") {
        // console.log("推荐课件")
        let { href } = this.$router.resolve({
          path: "/resource/resDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.bigtapvalue == 1 ? this.mb_bookTitle : "", //书本名
            mb_muluTitle: this.bigtapvalue == 1 ? this.mb_muluTitle : "", //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.bigtapvalue == 1 ? this.mb_tapTitle : "", //分类名
            mb_tagTitle: this.bigtapvalue == 1 ? this.mb_tagTitle : "", //标签名
            bookid: this.bigtapvalue == 1 ? this.kejianbooks_id : "", //书本id
            muluid: this.bigtapvalue == 1 ? this.kejianchapters_id : "", //目录id
            fenleiid: this.bigtapvalue == 1 ? this.kejianfl_id : "", //分类id
            tgid: this.bigtapvalue == 1 ? this.kejiantag_id : "", //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
            path: this.$route.path,
            routeName: this.bigTitle,
            bigTap: this.bigtapvalue,
          },
        });
        window.open(href, "_blank");
        //非推荐，全部为正常课件
      } else if (!lx && suffix != "rar" && suffix != "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/resDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.bigtapvalue == 1 ? this.mb_bookTitle : "", //书本名
            mb_muluTitle: this.bigtapvalue == 1 ? this.mb_muluTitle : "", //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.bigtapvalue == 1 ? this.mb_tapTitle : "", //分类名
            mb_tagTitle: this.bigtapvalue == 1 ? this.mb_tagTitle : "", //标签名
            bookid: this.bigtapvalue == 1 ? this.kejianbooks_id : "", //书本id
            muluid: this.bigtapvalue == 1 ? this.kejianchapters_id : "", //目录id
            fenleiid: this.bigtapvalue == 1 ? this.kejianfl_id : "", //分类id
            tgid: this.bigtapvalue == 1 ? this.kejiantag_id : "", //标签id
            njid: this.bigtapvalue == 1 ? this.nianji_id : "", //选择书本的年级id
            typeid: this.bigtapvalue == 1 ? this.systypes_id : "", //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
            path: this.$route.path,
            routeName: this.bigTitle,
            bigTap: this.bigtapvalue,
          },
        });
        window.open(href, "_blank");
      } else if (suffix == "rar" || suffix == "zip") {
        let { href } = this.$router.resolve({
          path: "/resource/zipResDetails",
          query: {
            id: id,
            gundongTop: document.documentElement.scrollTop,
            mb_bookTitle: this.bigtapvalue == 1 ? this.mb_bookTitle : "", //书本名
            mb_muluTitle: this.bigtapvalue == 1 ? this.mb_muluTitle : "", //书本目录名
            // mb_kewenTitle: this.mb_kewenTitle, //课文名
            mb_tapTitle: this.bigtapvalue == 1 ? this.mb_tapTitle : "", //分类名
            mb_tagTitle: this.bigtapvalue == 1 ? this.mb_tagTitle : "", //标签名
            bookid: this.bigtapvalue == 1 ? this.kejianbooks_id : "", //书本id
            muluid: this.bigtapvalue == 1 ? this.kejianchapters_id : "", //目录id
            fenleiid: this.bigtapvalue == 1 ? this.kejianfl_id : "", //分类id
            tgid: this.bigtapvalue == 1 ? this.kejiantag_id : "", //标签id
            njid: this.nianji_id, //选择书本的年级id
            typeid: this.systypes_id, //分类的大类型id
            searchTitle: this.searchTitle, //搜索名
            index: this.bookIndex, //第几本书
            mb_page: this.mb_page, //第几页
            path: this.$route.path,
            routeName: this.bigTitle,
            bigTap: this.bigtapvalue,
          },
        });
        window.open(href, "_blank");
      }
    },
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollY, true);
  },
};
</script>
<style>
/* 弹窗相关 */
.el-message-box__headerbtn .el-message-box__close {
  display: none;
}
.el-button--primary {
  background-color: #08a579 !important;
  border-color: #08a579 !important;
}
/* .el-button--primary:hover {
  background-color: #08A579;
} */
/* 用于推荐是否有用按钮 */
.el-radio__input.is-checked .el-radio__inner {
  border-color: #08a579;
  background: #08a579;
}
.el-radio__input.is-checked + .el-radio__label {
  color: #08a579;
}
.el-radio__inner:hover {
  border-color: #08a579 !important;
}
/* 用于资源库书本选中 */
.el-tree-node__content {
  margin: 0;
  position: relative;
  height: 44px;
  color: #333;
}
.el-tree-node__label {
  margin-left: 40px;
  font-weight: 400;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.el-tree-node:focus > .el-tree-node__content {
  color: #08a579;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  color: #08a579;
}
/* .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content */
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background: #e8fbf6;
}
.el-tree__empty-block {
  height: 0 !important;
  display: none;
}
.el-tree-node__expand-icon {
  position: absolute;
  right: 15px;
  font-size: 20px;
  /* color: #08a579; */
}
.el-tree-node__expand-icon.expanded {
  transform: rotate(180deg);
  color: #08a579;
}
.el-collapse-item__wrap {
  transition: 0.3s;
  border: 0;
}
.el-collapse-item__content {
  margin-top: 6px;
  padding-bottom: 0;
  height: auto !important;
}
.el-collapse-item__arrow {
  display: none !important;
}
.el-collapse-item {
  margin-bottom: 6px !important;
}
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: #ccc;
}
.el-collapse {
  border-top: 0;
}

/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
.page1 {
  width: 720px;
  margin: 0 auto;
}
.el-pagination {
  text-align: center;
  margin: 20px 80px 20px 0;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #08a579 !important;
}
.el-pagination .el-select .el-input .el-input__inner:hover {
  border-color: #08a579 !important;
}
.el-select .el-input__inner:focus {
  border-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}
.el-pager li:hover {
  color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff !important;
}
</style>
<style lang="less" scoped>
#container {
  input::-webkit-input-placeholder {
    /* WebKit browsers*/
    color: green;
    background-color: #f9f7f7;
    font-size: 14px;
  }
  input:-moz-input-placeholder {
    /* Mozilla Firefox 4 to 18*/
    color: green;
    background-color: #f9f7f7;
    font-size: 14px;
  }
  input::-moz-input-placeholder {
    /* Mozilla Firefox 19+*/
    color: green;
    background-color: #f9f7f7;
    font-size: 14px;
  }

  input:-ms-input-placeholder {
    /* Internet Explorer 10+*/
    color: green;
    background-color: #f9f7f7;
    font-size: 14px;
  }
  .el-input__inner {
    border: 1px solid #dcdfe6 !important;
  }
  width: 100%;

  .bigTap {
    display: flex;
    align-items: center;
    margin: 20px auto;
    margin-top: 20px;
    width: 1200px;
    background: #ffffff;
    border-radius: 10px;
    .banben {
      margin: 15px;
      h4 {
        margin-bottom: 8px;
        font-size: 18px;
        color: #333;
      }
      p {
        font-size: 14px;
        color: #333;
        span {
          color: #08a579;
          cursor: pointer;
        }
      }
    }
    .tabs {
      margin-left: 20px;
      text-align: center;
      line-height: 48px;
      width: 180px;
      height: 48px;
      background: #f0f2f5;
      border-radius: 10px;
      font-size: 16px;
      color: #333;
      font-weight: 600;
      cursor: pointer;
    }
    .chosebigTap {
      background: #e8fbf6;
      color: #08a579;
    }
  }
  .content {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 20px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    .resFl {
      margin-right: 20px;
      width: 360px;
      min-height: 1000px;
      border-radius: 10px;
      background-color: #fff;
      // /deep/.el-icon-arrow-right:before {
      //   content: "" !important;
      // }
      h2 {
        padding-left: 20px;
        color: #333333;
        border-bottom: 1px solid #dee0e3;
        border-radius: 10px 10px 0px 0px;
        line-height: 48px;
        font-size: 18px;
      }
      .chosedTap {
        display: flex;
        justify-content: center;
        border-bottom: 1px solid #dee0e3;
        span {
          margin-left: 21px;
          margin-top: 17px;
          width: 80px;
          font-size: 12px;
          color: #333;
        }
        .chosedtabsLists {
          display: flex;
          flex-wrap: wrap;
          margin-top: 9px;
          width: 370px;
          .chosedtab {
            display: flex;

            align-items: center;
            margin-left: 10px;
            margin-bottom: 10px;
            padding-left: 14px;
            padding-right: 8px;
            height: 36px;
            background: #08a579;
            border-radius: 4px;
            font-size: 12px;
            color: #fff;
            i {
              position: relative;
              top: 1px;
              left: 2px;
              color: #fff !important;
            }
            /deep/.el-icon-close:before {
              color: #fff;
            }
          }
        }
      }
      .box {
        margin-top: 15px;
        border-radius: 10px;
        cursor: pointer;
        // border: 1px solid #dee0e3;
        border-radius: 0px 0px 10px 10px;
        min-height: 800px;
        border-top: 0;
        .chose {
          background-color: #e8fbf6 !important;
          color: #08a579;
        }
        .el-icon-arrow-up:before {
          color: #08a579;
        }
        /deep/.el-collapse-item__header {
          display: block;
          border: 0;
          height: 48px;
        }
        /deep/.el-collapse {
          border: 0;
        }
        /deep/.el-tree {
          margin: 0 auto;
          width: 320px;
          border-radius: 10px;
          .el-tree-node__label {
            // font-weight: 600;
            font-size: 12px;
          }
          .el-tree-node.is-expanded > .el-tree-node__children {
            // background-color: red;
            .el-tree-node__label {
              font-weight: 400;
            }
          }
          .el-tree--highlight-current
            .el-tree-node.is-current
            > .el-tree-node__content {
            background: red;
            i {
              color: #08a579;
            }
          }
        }
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 360px;
          height: 48px;
          background: #f5f7fa;
          h3 {
            margin-left: 20px;
            font-size: 14px;
          }
          i {
            margin-right: 40px;
            font-size: 14px;
            color: #999999;
          }
        }
        .tongbu {
          .title {
            position: relative;
            top: 2px;
            width: 320px;
            border-radius: 10px;
            i {
              margin-right: 20px;
            }
          }
          .chosetoubuTitle {
            background-color: #e8fbf6 !important;
            color: #08a579;
          }
          /deep/.el-collapse {
            margin: 0 auto;
            width: 320px;
            border-radius: 10px;
            overflow: hidden;
          }
          /deep/.el-collapse-item__wrap {
            background-color: #f5f7fa;
          }
          /deep/.el-tree {
            background-color: #f5f7fa;
          }
        }
        .books_chose {
          background: #e8fbf6;
          color: #08a579;
          i {
            color: #08a579;
          }
        }
        //试卷分类
        .sjflLists {
          margin: 0 auto;
          width: 320px;
          .shijuanfl {
            margin-bottom: 10px;
            width: 320px;
            height: 40px;
            background: #f5f7fa;
            border-radius: 10px;
            h3 {
              margin-left: 20px;
              font-size: 12px;
              font-weight: normal;
              line-height: 40px;
            }
          }
          .chosesjfl {
            background: #e8fbf6;
            h3 {
              color: #08a579;
            }
          }
        }
        //素材分类
        .scflLists {
          margin: 0 auto;
          width: 320px;
          .sucaifl {
            margin-bottom: 10px;
            width: 320px;
            height: 40px;
            background: #f5f7fa;
            border-radius: 10px;
            h3 {
              margin-left: 20px;
              font-size: 12px;
              line-height: 40px;
            }
          }
          .chosescfl {
            background: #e8fbf6;
            h3 {
              color: #08a579;
            }
          }
        }
        //资源包分类
        .ziyuanbaoflLists {
          margin: 0 auto;
          width: 320px;
          .ziyuanbaofl {
            margin-bottom: 10px;
            width: 320px;
            height: 40px;
            background: #f5f7fa;
            border-radius: 10px;
            h3 {
              margin-left: 20px;
              font-size: 12px;
              line-height: 40px;
            }
          }
          .chosescfl {
            background: #e8fbf6;
            h3 {
              color: #08a579;
            }
          }
        }
      }
    }
    .right {
      width: 820px;
      background-color: #fff;
      border-radius: 10px;
      // 课件顶部资源包
      .topziyuanbao {
        display: flex;
        margin-bottom: 5px;
        cursor: pointer;
        .topzybLists {
          display: flex;
          // align-items: center;
          margin-left: 20px;
          margin-top: 20px;
          width: 380px;
          height: 100px;
          background: #f5f7fa;
          border-radius: 10px;
          .pic {
            margin: 20px;
            width: 60px;
            height: 60px;
            img {
              width: 60px;
            }
          }
          .msg {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-top: 17px;
            .title {
              font-size: 14px;
              color: #333;
              font-weight: 600;
              width: 252px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2; // 控制多行的行数
              -webkit-box-orient: vertical;
            }
            .bottom {
              display: flex;
              margin-bottom: 17px;
              color: #939599;
              .upTime {
                display: inline-block;
                margin-right: 40px;
              }
              .zynum {
                a {
                  color: #f6444e;
                }
              }
            }
          }
        }
      }
      //课件分类
      .kejianTaps {
        display: flex;
        align-items: center;
        margin: 20px;
        margin-bottom: 10px;
        width: 780px;
        height: 68px;
        background: #f5f7fa;
        border-radius: 10px;
        .flname {
          width: 800px;
          user-select: none;
          span {
            display: inline-block;
            padding: 5px 15px;
            margin-right: 10px;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            user-select: none;
          }
          .fenlei_color {
            color: #08a579;
            background: #e8fbf6;
          }
        }
        // .flname:first-of-type {
        //   span {
        //     padding-left: 20px;
        //   }
        // }
        // .flname:last-of-type {
        //   span {
        //     border-right: 0;
        //   }
        // }
      }
      // 试卷顶部分类
      .topshijuanfl {
        margin: 20px auto;
        width: 780px;
        background: #f5f7fa;
        border-radius: 10px;
        font-size: 14px;
        color: #333;
        overflow: hidden;
        .chosedsjfl {
          color: #08a579;
          background: #e8fbf6;
        }
        .topfl {
          display: flex;
          margin: 10px 20px;
          line-height: 20px;
          // height: 38px;
          // overflow: hidden;

          .fltitle {
            width: 48px;
            line-height: 30px;
          }
          .fllists {
            width: 650px;

            span {
              // margin-bottom: 10px;
              padding: 5px 10px;
              // text-align: center;
              line-height: 20px;
              // width: 68px;
              display: inline-block;
              margin-left: 15px;
              cursor: pointer;
            }
            // .flall {
            //   // background-color: #e8fbf6;
            //   // color: #08a579;
            // }
          }
        }
      }
      //素材分类
      .sucaiTaps {
        margin: 20px auto;
        width: 780px;
        background: #f5f7fa;
        border-radius: 10px;
        font-size: 14px;
        color: #333;
        overflow: hidden;
        .chosedsjfl {
          color: #08a579;
          background: #e8fbf6;
        }
        .topfl {
          display: flex;
          margin: 10px 20px;
          line-height: 20px;
          .fltitle {
            width: 48px;
            line-height: 30px;
          }
          .fllists {
            width: 650px;

            span {
              padding: 5px 10px;
              line-height: 20px;
              display: inline-block;
              margin-left: 15px;
              cursor: pointer;
            }
            .chosedfl {
              color: #08a579;
              background: #e8fbf6;
            }
          }
        }
      }
      //试卷分类
      .jiaoxueclass {
        display: flex;
        align-items: center;
        margin: 20px;
        margin-bottom: 10px;
        width: 780px;
        height: 68px;
        background: #f5f7fa;
        border-radius: 10px;
        .taps {
          width: 800px;
          span {
            display: inline-block;
            padding: 5px 15px;
            margin-right: 10px;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            user-select: none;
          }
          .chosedfl {
            color: #08a579;
            background: #e8fbf6;
          }
        }
      }
      //课件类资源样式
      .kejianlist {
        width: 820px;
        // height: 800px;
        -ms-overflow-style: none; /* IE 10+ */
        scrollbar-width: none; /* Firefox */
        overflow-y: scroll;
        .kejianBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 30px;
          padding-bottom: 30px;
          border-bottom: 1px dashed #e6e6e6;
          cursor: pointer;
          .kejianfile {
            margin-left: 40px;
            text-align: center;
            // width: 140px;
            // height: 140px;
            // background: linear-gradient(0deg, #e6e6e6, #ffffff);
            // border: 1px solid #ededed;
            img {
              width: 60px;
              height: 68px;
              vertical-align: text-bottom;
            }
          }
          .msg {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 40px;
            height: 68px;
            border-right: 1px solid #e6e6e6;
            cursor: pointer;
            .title {
              width: 460px;
              font-size: 14px;
              font-weight: 900;
              color: #333;
              overflow: hidden;
              white-space: wrap;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3; /*想省略几行就写几*/
              -webkit-box-orient: vertical;
              img{
                position: relative;
                top: 5px;
                margin-right: 8px;
                width: 36px;
              }
              span {
                margin-right: 8px;
                padding: 0 6px;
                text-align: center;
                color: #fff;
                line-height: 20px;
                font-size: 12px;
                width: 40px;
                height: 20px;
                background: #f85230;
                border-radius: 4px;
              }
            }
            p {
              width: 480px;
              // min-height: 80px;
              line-height: 20px;
              font-size: 13px;
              color: #666;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 4;
              -webkit-box-orient: vertical;
            }
            .bottom {
              display: flex;
              align-items: center;
              // position: relative;
              // top: 80px;
              font-size: 12px;
              color: #999;
              .upTime {
                margin-right: 20px;
              }
              .seeNum {
                i {
                  margin-right: 5px;
                }
              }
              .rate {
                display: flex;
                margin-right: 38px;
                width: 148px;
              }
              /deep/.el-rate__icon {
                margin-right: 0;
              }
            }
          }
          .downLoad {
            margin: 0 40px;
            width: 96px;
            height: 28px;
            color: #fff;
            text-align: center;
            line-height: 28px;
            background: #08a579;
            border-radius: 14px;
            background: #08a579;
            border-radius: 14px;
            cursor: pointer;
          }
          .jiaoyan {
            display: flex;
            // justify-content: space-between;
            flex-wrap: wrap;
            // padding: 30px 0 10px 0;
            width: 1200px;
            .box {
              position: relative;
              margin-left: 20px;
              margin-bottom: 30px;
              background-color: #fff;
              border-radius: 10px;
              cursor: pointer;
              img {
                margin-bottom: 10px;
                width: 240px;
                height: 136px;
                border-radius: 10px;
              }
              .activename {
                margin-bottom: 18px;
                width: 240px;
                font-size: 14px;
                color: #333333;
              }
              p {
                position: absolute;
                bottom: -5px;
                font-size: 12px;
                color: #939599;
              }
            }
            .box:hover {
              // transition: 1s;
              img {
                transition: 0.5s;
                // position: relative;
                // top: -10px;
                transform: translateY(-10px);
                box-shadow: 0px 2px 10px 2px #dedede;
              }
              .activename {
                color: #08a579;
              }
            }
          }
        }
        .ziyuanbaoLists {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 820px;
          // background: #f5f7fa;
          // border-radius: 10px;
          border-bottom: 1px dashed #e6e6e6;
          .pic {
            margin: 40px;
            width: 60px;
            img {
              width: 60px;
            }
          }
          .msg {
            position: relative;
            // margin-top: 16px;
            height: 80px;
            border-right: 1px solid #e6e6e6;
            cursor: pointer;
            .kejiantitle {
              font-size: 14px;
              color: #333;
              width: 490px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2; // 控制多行的行数
              -webkit-box-orient: vertical;
              p {
                width: 450px;
              }
            }
            .ziyuanbaodetails {
              margin-top: 5px;
              margin-bottom: 14px;
              span {
                color: #626366;
                font-size: 12px;
                a {
                  color: #f6444e;
                }
              }
              .leixing {
                display: inline-block;
                margin: 0 6px;
                width: 40px;
                height: 18px;
                background: #e6edfa;
                border-radius: 2px;
                text-align: center;
                line-height: 18px;
                color: #216efa;
              }
            }
            .bottom {
              // position: absolute;
              // bottom: 5px;
              color: #939599;
              .upTime {
                margin-right: 29px;
              }
              .seeNum {
                margin-right: 30px;
                i {
                  margin-right: 5px;
                }
              }
            }
          }
          .downLoad {
            margin: 0 40px;
            width: 96px;
            height: 28px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            line-height: 28px;
            background: #08a579;
            border-radius: 14px;
            background: #08a579;
            border-radius: 14px;
            cursor: pointer;
          }
        }
        .ziyuanbaoLists:last-child {
          margin-bottom: 20px;
        }
        .ziyuanbaoLists:hover {
          .msg {
            .kejiantitle {
              color: #08a579;
            }
          }
        }
      }
      ::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      //课件列表鼠标移动的样式
      .kejianBox:hover {
        .msg {
          .title {
            color: #08a597;
          }
        }
      }
      //空数据的展示
      .nothing {
        width: 800px;
        height: 400px;
        text-align: center;
        p {
          font-size: 16px;
          color: #333;
          margin-top: 50px;
        }
        img {
          margin-top: 100px;
          width: 280px;
        }
      }

      //教研课
      .classBox {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 25px;
        .box {
          cursor: pointer;
          margin-bottom: 10px;
          background-color: #fff;
          border-radius: 10px;
          img {
            margin-bottom: 16px;
            width: 270px;
            height: 140px;
          }
          .activename {
            margin-bottom: 17px;
            width: 250px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            color: #333333;
          }
          p {
            font-size: 14px;
            color: #939599;
          }
        }
      }
    }
  }
}
</style>
